$(function () {
    initCataList()
    // checkbox-获取文章分类
    function initCataList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            let arr = ['<option value="">请选择文章类别</option>']
            res.data.data.forEach(item => {
                arr.push(`<option value='${item.Id}'>${item.name}</option>`)
            })
            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            layui.form.render();
        })
    }
    // 文本域
    initEditor()

    // 文章封面
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 5 / 4,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)

    let state = '已发布'
    $('#btn2').on('click', function () {
        state = '草稿'
    })

    // 文章封面
    $('#chooseImgBtn').on('click', function () {
        $('#chooseImgInp').click()
    })

    $('#chooseImgInp').on('change', function () {
        var file = this.files[0]
        if (!file) {
            return layer.msg('请选择文章封面')
        }
        var newImgURL = URL.createObjectURL(file)
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })
    // 文章发布
    $('.layui-form').on('submit', function (e) {
        e.preventDefault()

        let formdata = new FormData(this)
        formdata.append('state', state)
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                formdata.append('cover_img', blob)
                axios({
                    method: 'POST',
                    url: '/my/article/add',
                    data: formdata
                }).then(res => {

                    console.log(res.data);
                    if(res.data.status) {
                        return layer.msg(res.data.message)
                    }

                    layer.msg('发布成功')
                    setTimeout(function () {
                        window.parent.document.querySelector('#art_list').click()
                        
                    },1000)
                })


            });




    })

})

